<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="addTemplate">添加运费模板</el-button>
            <el-button type="primary" @click="addCompany">添加物流公司</el-button>
            <!-- <el-button type="primary" @click="addTakeDelivery">添加提货公司</el-button> -->
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="express_id" label="ID" width="100"></el-table-column>
            <el-table-column prop="title" label="模板名称" min-width="300"></el-table-column>
            <el-table-column label="使用情况" min-width="200">
                <template #default="{ row }">
                    被<strong style="color: #4b93fa; padding: 0px 2px">{{ row.use_count }}</strong
                    >个商品使用
                </template>
            </el-table-column>
            <el-table-column prop="updated_at_label" label="更新时间" width="200"></el-table-column>
            <el-table-column label="操作" width="260" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="clickSet(row.express_id)">设置快递方式</el-button>
                    <el-button class="theme-btn" link type="primary" @click="clickEdit(row)">编辑</el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(row)" v-if="row.use_count <= 0">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加/编辑运费模板 -->
        <el-dialog
            v-model="dialogUpdate"
            :title="classType == 1 ? '添加运费模板' : '编辑运费模板'"
            width="560px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="closeTemplate"
        >
            <div class="tag-item">
                <div class="tag-item__label">运费模板</div>
                <div class="tag-item__right">
                    <el-input v-model="template_name" clearable placeholder="请输入运费模板名称" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmTemplate">确认</el-button>
                    <el-button @click="closeTemplate">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch,onBeforeUnmount } from "vue"
import { useRouter, onBeforeRouteLeave } from "vue-router"
import { useBaseStore } from "@store/base"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const router = useRouter()
const store = useBaseStore()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

onBeforeUnmount(() => {
   
})

onBeforeRouteLeave((to, from, next) => {
    if (to.name === "LogisticsList" || to.name === "LogisticsCompany") {
        store.setInclude("Distribution")
    } else {
        store.delInclude("Distribution")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("express/index", params)
}

/**
 * 添加/编辑
 * @property {Boolean} dialogUpdate 添加/编辑弹窗状态
 * @property {Boolean} form_loading 提交按钮状态
 * @property {Number} classType 弹窗类型，1是添加，2是编辑
 * @property {String} template_name 模板名称
 * @property {Function} addTemplate 点击添加
 * @property {Function} clickEdit 点击编辑
 * @property {Function} confirmTemplate 确认保存
 * @property {Function} handleDelete 删除
 * @property {Function} closeTemplate 关闭弹窗
 */
const dialogUpdate = ref(false)
const form_loading = ref(false)
const classType = ref(1)
const template_name = ref("")
const template_id = ref("")
const addTemplate = () => {
    dialogUpdate.value = true
    classType.value = 1
}
const clickEdit = (row) => {
    dialogUpdate.value = true
    classType.value = 2
    setTimeout(() => {
        template_name.value = row.title
        template_id.value = row.express_id
    }, 50)
}
const confirmTemplate = () => {
    if (template_name.value == "") {
        proxy.$message({ message: "请输入运费模板名称！", type: "warning" })
        return
    }
    form_loading.value = true
    let data = {
        title: template_name.value,
    }
    if (classType.value == 2) {
        data.express_id = template_id.value
    }
    let url = classType.value == 1 ? "express/add" : "express/update"
    proxy.$axios
        .post(url, data)
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogUpdate.value = false
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeTemplate = () => {
    dialogUpdate.value = false
    template_name.value = ""
}
const handleDelete = (row) => {
    proxy.$axios
        .post("express/delete", {
            express_id: row.express_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 添加物流公司
const addCompany = () => {
    router.push("/Setup/LogisticsCompany")
}

// 前往设置快递方式
const clickSet = (id) => {
    router.push({
        path: "/Setup/LogisticsList",
        query: {
            exp_id: id,
        },
    })
}

// const addTakeDelivery = () => {
//     router.push("/Setup/TakeDelivery")
// }
</script>
<script>
export default {
    name: "Distribution",
}
</script>

<style lang="less" scoped>
.tag-item {
    display: flex;
    align-items: center;

    .tag-item__label {
        flex: none;
        text-align: right;
        width: 120px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
    }

    .tag-item__right {
        flex: none;
        width: 300px;
    }
}
</style>
